<!-- 设备位置设置 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设备位置设置</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?31231">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div ref="tops">
                <div class="cell_txt">工程编号<span>{{projectId}}</span></div>
                <div class="cell_box" style="justify-content: space-between;">
                    <div>
                        <div class="cell_name" style="display: inline-block;">工程名称 </div>
                        <!-- <div class="cell_cont">{{projectName}}</div> -->
                        <div class="cell_input" style="display: inline-block;">
                            <el-input class="public_input" style="width: 200px;" disabled placeholder="请输入内容"
                                v-model="projectName">
                            </el-input>
                        </div>
                    </div>
                    <div>
                        <div class="cell_name" style="display: inline-block;">位置信息 </div>
                        <div class="cell_input" style="display: inline-block;">
                            <el-input class="public_input" style="width: 200px;" placeholder="请输入内容"
                                v-model="editPositioninfo.wzName">
                            </el-input>
                        </div>
                    </div>

                </div>
            </div>
            <div class="detail_box" ref="detailbox">
                <div style="width: 100%;height: 100%;border: 1px solid #EBEBEB;margin-top: 10px;">
                    <div class="img_box">
                        <img v-if="!fileData.fileurl"
                            style="position: absolute; left: 50%;transform: translateX(-50%);width: 30px;"
                            src="../img/loading.gif" alt="">
                        <div v-if="!fileData.fileurl"
                            style="position: absolute; top: 106px;left: 50%;transform: translateX(-50%);">正在加载图纸</div>
                        <div class="img_cont" style="width: 100%;" v-if="fileData.fileurl">
                            <div class="img_contan" style="width: 100%;position: relative;">
                                <img id="drawing" :src="fileData.fileurl" alt="">
                                <!-- img上 进行点击事件鼠标移动事件绑定 -->
                                <div @click="tabImg"
                                    style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.3);">
                                </div>
                                <div class="sb_txt">重选{{editPositioninfo.imgId}}号仓库位置</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
        <div style="height: 0;width: 0;overflow: hidden;"><input id="publicValue" type="text"></div>
    </div>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    baseUrl: 'http://47.114.160.61:8050',
                    showApp: false,
                    projectId: 'G000183',
                    projectName: '',
                    fileData: {
                        filename: '',
                        fileurl: '',
                    },
                    ckmxTableData: [],
                    positionInfo: {},
                    dialogVisible: false,
                    ckmxPopupTitle: '新增仓库明细',
                    addCkObj: {},
                    editIndex: '',
                    popupType: 'add',
                    editPositioninfo: {
                        pixelx: "",
                        piexly: '',
                        wzName: ''
                    },
                };
            },
            methods: {
                checkList() {
                    layer.open({
                        type: 2,
                        title: '查看列表',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['58.71%', '55.55%'],
                        content: '/ApsPublic/publicList/checkCkList.html?' + new Date().getTime(),
                        end: function () {
                        }
                    });
                },
                resPosition() {
                    var allwidth = $('#drawing').width()
                    var allheight = $('#drawing').height()
                    for (var i = 0; i < $('.ck_detail_box').length; i++) {
                        var isxBig = (parseFloat(allwidth * $('.ck_detail_box').eq(i).attr('datax') / 100) + parseFloat($('.ck_detail_box').eq(i).innerWidth() / 2)) - allwidth
                        var istBig = (parseFloat(allheight * $('.ck_detail_box').eq(i).attr('datay') / 100) + parseFloat(180 + 7)) - allheight
                        var islefbig = parseFloat($('.ck_detail_box').eq(i).innerWidth() / 2) - parseFloat(allwidth * $('.ck_detail_box').eq(i).attr('datax') / 100)
                        if (isxBig > 0) {
                            $('.ck_detail_box').eq(i).css({
                                right: '4px',
                                left: 'auto',
                                transform: 'none'
                            })
                            $('.ck_detail_box').eq(i).find('.ck_detail_arrow').css({
                                left: 'auto',
                                right: '5px',
                                transform: 'none'
                            })
                        }
                        if (islefbig > 0) {
                            $('.ck_detail_box').eq(i).css({
                                left: '4px',
                                transform: 'none'
                            })
                            $('.ck_detail_box').eq(i).find('.ck_detail_arrow').css({
                                left: '5px',
                                transform: 'none'
                            })
                        }
                        if (istBig > 0) {
                            $('.ck_detail_box').eq(i).css({
                                top: 'auto',
                                bottom: '58px'
                            })
                            $('.ck_detail_box').eq(i).find('.ck_detail_arrow').css({
                                bottom: '-7px',
                                top: 'auto',
                                transform: 'rotate(180deg)'
                            })
                        }
                    }
                },
                establishCk(objs) {
                    var that = this
                    console.log(objs)
                    var imgUrl = ''
                    var nodeHtml = ''
                    imgUrl = '../img/icon42.png'
                    nodeHtml = '<div  style="width:36px;height:44px;top: calc(' + objs.piexly + '% - 44px);left: calc(' + objs.pixelx + '% - 18px);" class="img_icon1"><img src="' + imgUrl + '" alt=""></div>'
                    $('.img_contan').append(nodeHtml)
                    that.resPosition()
                },
                // 鼠标点击事件
                tabImg(e) {
                    var lefts = (e.offsetX / $('#drawing').width() * 100).toFixed(2)
                    var tops = (e.offsetY / $('#drawing').height() * 100).toFixed(2)
                    console.log(e, 55)
                    var that = this
                    that.editPositioninfo.pixelx = lefts
                    that.editPositioninfo.piexly = tops
                    $('.img_icon1').remove()
                    that.establishCk(that.editPositioninfo)
                },

                confirms() {
                    var that = this
                    if (this.editPositioninfo.pixelx == '' || this.editPositioninfo.piexly == '') {
                        this.$message({
                            message: '请添加设备位置',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.editPositioninfo.wzName == '') {
                        this.$message({
                            message: '请输入位置信息',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var data = JSON.stringify(this.editPositioninfo);
                    parent.$('#publicValue').val(data);
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }, 100);
                },

                // 获取设备的数据列表
                getCkmxList(files) {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: this.baseUrl + '/WebProxy/Proxy?url=DeviceManagement/GetInstallationNotificationList',
                        data: {
                            param: "Page=1&PageSize=99999",
                            type: "get"
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.Code != 0) {
                                that.$message({
                                    message: res.Msg ? res.Msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.ckmxTableData = []
                            $('.img_icon').remove()
                            setTimeout(function () {
                                // 将保存图片的字段进行相应的处理
                                if (files.length > 0) {
                                    that.isupload = true
                                    that.fileData = {
                                        fileid: files.split(',')[0],
                                        filename: files.split(',')[1],
                                        fileurl: ''
                                    }
                                    var img = new Image();
                                    img.onload = function () {
                                        var widths = img.naturalWidth
                                        var heights = img.naturalHeight
                                        if (widths > $('.img_box').width()) {
                                            $('.img_cont').css('width', '100%')
                                        } else {
                                            $('.img_cont').css('width', widths + 'px')
                                        }
                                        that.fileData.fileurl = img.src
                                        setTimeout(function () {
                                            for (var i = 0; i < res.Datas.length; i++) {
                                                var imgUrl = ''
                                                var nodeHtml = ''
                                                imgUrl = '../img/icon41.png'
                                                nodeHtml = '<div mapid="' + res.Datas[i].imgId + '" style="width:36px;height:44px;top: calc(' + res.Datas[i].piexly + '% - 44px);left: calc(' + res.Datas[i].pixelx + '% - 18px);" class="img_icon"><img mapid="' + res.Datas[i].imgId + '" src="' + imgUrl + '" alt=""></div>'
                                                $('.img_contan').append(nodeHtml)
                                            }
                                            that.resPosition()
                                        }, 100);
                                    }
                                    img.src = baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + files.split(',')[0];
                                }
                                for (var i = 0; i < res.Datas.length; i++) {
                                    res.Datas[i].imgId = i + 1
                                }
                                that.ckmxTableData = res.Datas

                            }, 500)
                        }
                    });
                },
                //获取工程图纸
                getCktzData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: this.baseUrl + '/Material/GetProjectMapId',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.getCkmxList(res.data)
                        }
                    });
                },
                getProjectData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: this.baseUrl + '/Material/GetProjectData',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.projectId = res.data[0].projectid;
                            that.projectName = res.data[0].name;
                        }
                    })
                },
            },
            mounted() {
                this.showApp = true;
                // this.projectId = getQuerys('projectId')
                this.getCktzData()
                this.getProjectData();
            }
        });
    </script>
</body>
<style>
    .content_box {
        padding: 2.77vh 2.08vw 4px;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

    .but_box .el-button {
        width: 120px;
        height: 32px;
        border-radius: 5px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title_but {
        padding-left: 10px;
        flex: 1;
    }

    .cell_txt {
        color: #000000;
        font-weight: bold;
        line-height: 1;
    }

    .cell_txt span {
        padding-left: 10px;
    }

    .cell_box {
        display: flex;
        align-items: center;
        line-height: 1;
        margin-top: 2.77vh;
    }

    .cell_cont {
        margin-left: 10px;
        height: 32px;
        background: #E3E3E3;
        border: 1px solid #BBBBC5;
        border-radius: 5px;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .title_box {
        display: flex;
        align-items: center;
        margin-top: 2.77vh;
        padding-bottom: 10px;
    }

    .file_but {
        display: flex;
        justify-content: space-between;
    }

    .icon_type_box {
        display: flex;
        align-items: center;
    }

    .icon_type_box img {
        margin-left: 20px;
    }

    .icon_type_box div {
        margin-left: 8px;
    }

    .file_box {
        width: 100%;
        height: 100%;
        min-height: 300px;
    }

    .file_upload-demo {
        width: 100%;
        height: 100%;
    }

    .file_box .el-upload {
        width: 100%;
        height: 100%;
    }

    .file_box .el-upload-dragger {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .file_box .el-upload-dragger .el-icon-upload {
        margin-top: 0;
    }

    .img_box {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        /* overflow: auto; */
        position: relative;
        padding: 20px;
        min-height: 300px;
    }

    .img_icon {
        position: absolute;
        cursor: pointer;
        transition: all 0.5s;
        z-index: 1;
    }

    .img_icon1 {
        position: absolute;
        cursor: pointer;
        transition: all 0.5s;
        z-index: 1;
    }

    .img_iconanimation {
        animation: myfirst 0.8s;
        animation-iteration-count: infinite;
    }

    @keyframes myfirst {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.2;
        }
    }

    .img_txt {
        position: absolute;
        left: 50%;
        color: #fff;
        font-size: 16px;
        transform: translateX(-50%);
    }

    .ck_detail_title {
        white-space: nowrap;
        height: 32px;
        padding: 0 10px;
        line-height: 32px;
    }

    .ck_detail_box {
        position: absolute;
        background: #fff;
        border-radius: 5px;
        left: 50%;
        transform: translateX(-50%);
        /* box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2); */
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border: 1px solid #e4e7ed;
    }

    .ck_detail_arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff;
        top: -7px;
        left: calc(50% - 7px);
    }

    .img_icon:hover {
        z-index: 2;
    }

    .ck_detail_cont {
        height: 32px;
        overflow: hidden;
        transition: all 0.5s;
    }

    .ck_detail_container {
        display: none;
        padding: 10px;
        padding-bottom: 10px;
        overflow: hidden;
    }

    .ck_detail_left {}

    .ck_detail_right {
        width: 194px;
        min-width: 194px;
        padding-left: 20px;
    }

    .ck_detail_link_box {
        display: flex;
        align-items: center;
    }

    .ck_detail_link {
        color: #5574D7;
        padding: 0 10px;
    }

    .ck_detail_but {
        background: #5574D7;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        height: 24px;
        border-radius: 5px;
        width: 100px;
        justify-content: center;
    }

    .ck_detail_cont {
        overflow: hidden;
    }

    .public_popup_box {
        height: 100%;
    }

    .public_popup_cell_box {
        padding: 2.77vh 2.08vw 0;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .public_popup {
        /* height: 70vh; */
        height: 400px;
    }

    .popup_cell_item {
        display: flex;
        margin-bottom: 20px;
    }

    .popup_cell_name {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        line-height: 32px;
    }

    .popup_cell_cont {
        /* padding-right: 100px; */
        display: flex;
        align-items: center;
        flex: 1;
    }

    .el-radio {
        margin-right: 1.56vw;
    }

    .sb_txt {
        position: absolute;
        left: 0;
        top: 0;
        padding: 4px 10px;
        background: #fff;
        color: #333;
        border: 1px solid #ddd;
        display: none;
    }

    .el-radio__input.is-disabled+span.el-radio__label {
        color: #606266
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #5574D7 !important;
    }

    .el-radio__input.is-disabled .el-radio__inner,
    .el-radio__input.is-disabled.is-checked .el-radio__inner {
        background-color: #FFF;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #5574D7 !important;
        background: #5574D7 !important;
    }

    .el-radio__input.is-disabled .el-radio__inner::after {
        background-color: #FFF;
    }

    .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
        background-color: #FFF;
    }
</style>

</html>